<template>
  <ul class="menu bg-base-200 rounded-box w-120">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
  </ul>

  <!-- 在下面从官网拷贝的案例中，除了他规定的modal modal-box,dialog不能修改，其他每一层样式都是tailwind，自行修改 -->
  <button class="btn" onclick="pay.showModal()">退款</button>
  <dialog id="pay" class="modal">
    <div class="modal-box w-400">
      <form method="dialog">
        <button class="absolute right-10 top-10">✕</button>
      </form>
      <div class="px-25 py-10">
        <div class="text-16 mb-30 text-center">是否确认取消订单并退款</div>
        <div class="flex-center">
          <form method="dialog">
            <button
              class="cursor-pointer text-center w-128 leading-[40px] bg-[#226AE3] text-white rounded-sm"
            >
              确定
            </button>
            <button
              class="cursor-pointer border-solid border-[#adadad] ml-12 border-[1px] text-center w-128 leading-[40px] text-[#626262] rounded-sm"
            >
              取消
            </button>
          </form>
        </div>
      </div>
    </div>
  </dialog>
  <!-- 用tailwind复写他的组件 -->
  <button class="btn w-[120px] leading-[30px] bg-green-500 hover:bg-green-600 text-18">
    Button
  </button>
  <div class="badge text-28 bg-red-100">default</div>

  <!-- 公共底部 -->
  <nav class="shadow-sm h-200 bg-[#414141] flex-center">
    <div class="max-w-1800 min-w-1200 mx-auto flex-center px-30 text-12 text-[#999]">
      <div class="h-150 pr-14 border-r-[1px] border-solid border-[#777777]">
        <!-- <img class="w-182 h-26 mb-28" src="@/assets/images/home/footerlogo.png" alt="" /> -->
        <p class="mb-28 mt-14 *:inline-block align-top flex items-center">
          <a class="w-67 h-23" href="https://cnki.net" target="_blank" rel="noopener noreferrer">
            <img
              class="block w-[100%] h-[100%]"
              src=""
              alt=""
            />
          </a>
          <span class="ml-15 mr-15 text-[#E6E6E6]">|</span>
          <router-link class="w-88 h-22" to="/" target="_blank" rel="noopener noreferrer">
            <img class="block w-[100%] h-[100%]" src="" alt="" />
          </router-link>
        </p>
        <a
          class="inline-block w-86 h-32"
          href="https://ss.knet.cn/verifyseal.dll?sn=e13111111010043364isll000000&a=1&pa=0.08881110103584755"
          target="_blank"
        >
          <img
            class="w-[100%] h-[100%]"
            src=""
            alt=""
          />
        </a>
      </div>
      <div class="h-150 pl-36 pr-40 leading-[30px] border-r-[1px] border-solid border-[#777777]">
        <div>
          京ICP证040431号
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
            >京ICP备11019815号-4</a
          >
        </div>
        <div>
          <a href="https://piccache.cnki.net/index/images/gb/416.jpg" target="_blank"
            >网络出版服务许可证（总）网出证（京）字第416号</a
          >
        </div>
        <div>
          <a
            href="https://piccache.cnki.net/index/images/gb/170001.jpg"
            target="_blank"
            rel="noopener noreferrer"
            >出版物经营许可证</a
          >
        </div>
        <div>京公网安备11010802020460号</div>
        <div>互联网宗教信息服务许可证:京(2022)0000115</div>
      </div>
      <div class="h-150 px-36 leading-[30px] border-r-[1px] border-solid border-[#777777]">
        <a
          href="https://my.cnki.net/cnkiAgreement/cnkiUseAgreement.html"
          target="_blank"
          class="flex-center"
        >
          <span class="icon-[mdi--alert-circle] text-16 mr-4"></span>用户协议
        </a>
        <a
          href="https://my.cnki.net/cnkiAgreement/cnkiPrivacyAgreement.html"
          target="_blank"
          class="flex-center"
        >
          <span class="icon-[icon-park-solid--protect] text-16 mr-4"></span> 隐私政策
        </a>
        <a
          class="block flex-center"
          href="https://help.cnki.net/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="icon-[tdesign--service-filled] text-16 mr-4"></span> 在线咨询
        </a>
        <a class="flex-center cursor-pointer" target="_blank" href="https://service.cnki.net/home">
          <span class="icon-[material-symbols--help] text-16 mr-4"></span> 客服中心
        </a>
      </div>
      <div class="h-150 pl-28 leading-[30px]">
        <div>服务热线：400-819-9993 010-62982499</div>
        <div>举报电话：400-062-8866</div>
        <div>服务邮箱：jubao@cnki.net</div>
        <div>同方知网数字科技有限公司</div>
      </div>
    </div>
  </nav>
</template>
<script setup lang="ts">
// 登录注册 -- 以下内容放到main.js
window.addEventListener('cnki-login-success', (event) => {
  //也可以把用户名，成功的状态，放到store中，方便其他地方使用
  // const userStore = userInfoStore()
  // userStore.setLogin(true)
  // userStore.setUserInfo({
  //   name: event.detail,
  // })
  // 由于 event 是普通的 Event 类型，不存在 detail 属性，这里将其类型断言为 CustomEvent 以解决类型错误
  console.log((event as CustomEvent).detail) //这是用户名
})

const loadLoginScript = () => {
  const script = document.createElement('script')
  script.id = 'ecpdialogloginstruct'
  script.src = import.meta.env.DEV
    ? 'http://e.dev.cnki.net/toplogin/scripts/ecpLoginDialogLink.js'
    : 'https://login.cnki.net/toploginnew/scripts/ecpLoginDialogLink.js'
  script.setAttribute(
    'data',
    import.meta.env.DEV ? 'platform=test&nojquery=0' : 'platform=test&nojquery=0',
  )
  document.body.appendChild(script)
}

loadLoginScript()
//登录注册 -- 以下内容放到index.html最下方的script标签中， 登录成功，会在全局调用这个方法。调用的时候，会把用户名传递过去。 然后在main.js中，监听这个事件，window.addEventListener('cnki-login-success', (event) => {})然后做一些操作。如更新store等。

// eslint-disable-next-line
function LoginSucess(a: { UserName: string }) {
  const username = a.UserName
  window.dispatchEvent(new CustomEvent('cnki-login-success', { detail: username }))
}
</script>
<style scoped></style>
